<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../../../../header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="<%=basePath%>statics/resources/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet">
<link href="<%=basePath%>bootstrap/css/bootstrap.min.css"
	rel="stylesheet">

<script
	src="<%=basePath%>statics/resources/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="<%=basePath%>bootstrap/js/bootstrap.min.js"></script>
<script
	src="<%=basePath%>statics/resources/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<title></title>
<style>
.required-wrap {
	color: #f00;
	margin-left: -6px;
	margin-right: 1px;
	font-size: 12px;
}

.wrap {
	margin: 30px 30px 10px 30px;
}

.wrap .jobcode {
	margin-top: 20px;
	float: left;
}

.wrap-input {
	width: 220px;
	height: 28px;
	margin-left: 40px;
}

.wrap-input1 {
	width: 220px;
	height: 28px;
	margin-left: 18px;
}

textarea.ui-input {
	height: 60px;
	width: 220px;
}
</style>

</head>
<body style="align: center;">
	<div style="margin-top: 30px; margin-left: 30px;">
		<input type="hidden" name="parentId" id="parentId" />
		<!-- <span
			id="parentname"></span> -->
		<form id="manage-form" action="" class="nice-validator n-yellow"
			novalidate="novalidate" _lpchecked="1">

			<div id="base-form">

				<ul class="mod-form-rows base-form cf new-liclass">
					<li class="row-item  no_padding">
						<div class="label-wrap">
							<label for="barCode">变动人员</label>
						</div>
						<div class="ctn-wrap">

							<select style="width: 210px; height: auto;" class="ui-input"
								name="personId" id="personId">
								<s:forEach items="${persons}" var="person">
									<option value="${person.id}">${person.personname} ${person.personcode}</option>
								</s:forEach>
							</select>
						</div>
					</li>
				</ul>

				<ul class="mod-form-rows base-form cf new-liclass">
					<li class="row-item  no_padding">
						<div class="label-wrap">
							<label for="barCode">变动类型</label>
						</div>
						<div class="ctn-wrap">

							<select style="width: 210px; height: auto;" class="ui-input"
								name="changeType" id="changeType">
								<option value="0">--请选择--</option>
								<option value="1">转正</option>
								<option value="2">部门变动</option>
								<option value="3">离职</option>
							</select>
						</div>
					</li>
				</ul>

				<ul class="mod-form-rows base-form cf new-liclass"
					id="beforeChangeUl">
					<li class="row-item  no_padding">
						<div class="label-wrap">
							<label for="barCode">变动前：</label>
						</div>
						<div class="ctn-wrap">
							<input value="" class="ui-input" readOnly id="beforeChange"
								autocomplete="off" aria-required="true" type="text">
						</div>
					</li>
				</ul>
				<ul class="mod-form-rows base-form cf new-liclass"
					id="afterChangeUl">
					<li class="row-item  no_padding">
						<div class="label-wrap">
							<label for="barCode">变动后：</label>
						</div>
						<div class="ctn-wrap">
							<input value="" class="ui-input" readOnly id="afterChange"
								autocomplete="off" aria-required="true" type="text">
						</div>
					</li>
				</ul>
				<ul class="mod-form-rows base-form cf new-liclass">
					<li class="row-item  no_padding">
						<div class="label-wrap">
							<label for="barCode">生效时间</label>
						</div>
						<div class="ctn-wrap">
							<input value="" class="ui-input" name="effectDate"
								id="effectDate" type="text">
						</div>
					</li>
				</ul>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		function initDate(effectDateId) {
			var effectDateValue;
			effectDateId = "#" + effectDateId;
			$(effectDateId).datetimepicker({
				format : 'yyyy-mm-dd hh:ii:ss',
				language : "zh-CN",
				todayHighlight : true,
				autoclose : true,
				todayBtn : true,
				minDate : 0,
				onChangeDateTime : function(dp, $input) {
					effectDateValue = $(effectDateId).val();
				}
			});
		}

		var api = frameElement.api;
		var operate = api.data.operate;
		var rowid = api.data.rowid;
		var rowdata = api.data.rowdata;
		var companyId = 1;
		var parentname = api.data.parentname;
		var parentId = api.data.parentId;
		var CallBack = api.data.callback;

		initDate('effectDate');

		$(function() {
			initPopBtns();
			$("#changeType").change(function() {
				selectChange();
			});
			$("#personId").change(function() {
				personSelectChange();
			});
			if (operate == "edit") {
				$("#personId").find("option:selected").text(rowdata.personid);
				$("#personId").attr("disabled",true);
				$("#changeType").attr("disabled",true);
				$("#changeType").find("option:selected").text(rowdata.changetype);
				$("#effectDate").val(rowdata.effectdate);
				dealCondition();
				
			}
		})
		
		function dealCondition(){
			if(rowdata.changetype == "部门变动"){
				$("#beforeChange").val(rowdata.beforechange);
				if ($("#parentname").length == 0) {
					$("#afterChange").replaceWith(
							"<span id='parentname2'></span>");
					var categoryTree2 = Public.categoryTree($("#parentname2"),
							{
								inputWidth : 160,
								height : 200,
								width : 150,
								rootTxt : "请选择类别"
							});
				}
			}else{
				$("#beforeChangeUl").hide();
				$("#afterChangeUl").hide();
			}
		}
		
		function personSelectChange() {
			var options = $("#changeType option:selected");
			if (options.text() == "部门变动") {
				$.ajax({
					url : 'personChange/getDepartmentNameByPersonId',
					data : "personId="
							+ $('#personId option:selected').attr('value'),
					type : "post",
					success : function(data) {
						if (data.status == 200) {
							$("#beforeChange").val(data.message);
						}
					}
				});
			}
		}

		function selectChange() {
			var options = $("#changeType option:selected");
			if (options.text() == "离职" || options.text() == "转正") {
				$("#beforeChangeUl").hide();
				$("#afterChangeUl").hide();
			} else {
				$("#beforeChangeUl").show();
				$("#afterChangeUl").show();
				$.ajax({
					url : 'personChange/getDepartmentNameByPersonId',
					data : "personId="
							+ $('#personId option:selected').attr('value'),
					type : "post",
					success : function(data) {
						if (data.status == 200) {
							$("#beforeChange").val(data.message);
						}
					}
				});
				if ($("#parentname2").length == 0) {
					$("#afterChange").replaceWith(
							"<span id='parentname2'></span>");
					var categoryTree2 = Public.categoryTree($("#parentname2"),
							{
								inputWidth : 160,
								height : 200,
								width : 150,
								rootTxt : "请选择类别"
							});

				}
			}
		}

		function initPopBtns() {
			if ("view" == operate) {
				api.button({
					id : "cancel",
					name : "关闭"
				})
				return;
			}

			var btnname = "add" == operate ? [ "保存", "关闭" ] : [ "确定", "取消" ];

			api.button({
								id : "confirm",
								name : btnname[0],
								focus : true,
								callback : function(e) {
									var formData = new FormData();
									var changeType = $("#changeType").find(
											"option:selected").text();
									var effectDate = $("#effectDate").val();
									if (effectDate == '') {
										alert("请选择生效日期！");
										return false;
									}
									if (changeType == "部门变动") {
										if ($("#parentname").val() == '') {
											alert("请选择变动前部门！");
											return false;
										}
										if ($("#parentname2").val() == '') {
											alert("请选择变动后部门！");
											return false;
										}
										formData.append("beforechange", $(
												"#beforeChange").val());
										formData.append("afterchange", $(
												"#parentname2").val());
									}
									formData.append("changetype", changeType);
									formData.append("effectdate", effectDate);

									//formData.append("id", rowid || 0);

									var re = true;
									if (operate == "add") {
									formData.append("personid", $(
											'#personId option:selected').attr(
											'value'));
										$.ajax({
													url : 'personChange/add',
													type : 'POST',
													dataType : "json",
													data : formData,
													async : false,
													cache : false,
													contentType : false, //不设置内容类型  
													processData : false, //不处理数据  
													success : function(data) {
														console.log(data);
														if (data.status == 200) {
															parent.Public
																	.tips({
																		content : "添加成功"
																	})
															CallBack();
														} else {
															parent.Public
																	.tips({
																		type : 1,
																		content : "添加失败:"
																				+ data.message
																	});
															re = false;
														}
													},
													error : function(
															XMLHttpRequest,
															textStatus,
															errorThrown) {
														// 状态码
														console
																.log(XMLHttpRequest.status);
														// 状态
														console
																.log(XMLHttpRequest.readyState);
														// 错误信息   
														console.log(textStatus);
													}
												});
									} else {
										var personId;
										$("#personId option").each(function() {    
										    var value = $(this).val();  
										    var text = $(this).text();
										    if(text == rowdata.personid){
										    	personId = value;
										    }
										});
										formData.append("personid",personId);
										formData.append("id", rowdata.id);
										
										$.ajax({
											url : "personChange/update",
											type : "POST",
											dataType : "json",
											data : formData,
											async : false,
											cache : false,
											contentType : false, //不设置内容类型  
											processData : false, //不处理数据  
											success : function(data) {
												if (data.status == 200) {
													parent.Public.tips({
														content : "修改成功"
													})
													CallBack();
												} else {
													parent.Public.tips({
														type : 1,
														content : "修改失败:"
																+ data.message
													});
													re = false;
												}
											}
										});
									}
									return re;
								}
							}, {
								id : "cancel",
								name : btnname[1]
							})
		}
	</script>
	<script type="text/javascript">
		var api = frameElement.api;
		var operate = api.data.operate;
		var rowid = api.data.rowid;
		var rowdata = api.data.rowdata;
		var companyId = 1;
		var parentname = api.data.parentname;
		var parentId = api.data.parentId;
		var deptname = api.data.deptname;
		var CallBack = api.data.callback;

		//生成树
		Public.zTree = {
			init : function($target, opts, setting, callback) {
				var tree = {
					zTree : {},
					opts : {
						showRoot : true,
						defaultClass : '',
						disExpandAll : false,//showRoot为true时无效
						callback : '',
						rootTxt : '全部'
					},
					setting : {
						edit : {
							enable : false
						},
						check : {
							enable : false
						},
						view : {
							dblClickExpand : false,
							showLine : true,
							selectedMulti : false
						},
						data : {
							simpleData : {
								enable : true,
								idKey : "Id",
								pIdKey : "ParentId",
								rootPId : ""
							}
						},
						callback : {
						//beforeClick: function(treeId, treeNode) {}
						}
					},
					_getTemplate : function(opts) {
						this.id = 'tree' + parseInt(Math.random() * 10000);
						var _defaultClass = "ztree";
						if (opts) {
							if (opts.defaultClass) {
								_defaultClass += ' ' + opts.defaultClass;
							}
						}
						return '<ul id="'+this.id+'" class="' + _defaultClass + '"></ul>';
					},
					getData : function(opts) {
						var self = this;
						self.opts = $.extend(true, self.opts, opts);
						var opts = self.opts;
						var selectedValue = opts.queryString;
						if (selectedValue == undefined
								|| selectedValue == 'undefined'
								|| selectedValue == 'null'
								|| selectedValue == null) {
							selectedValue = "";
						}
						selectedValue = encodeURI(encodeURI(selectedValue));//防止中文乱码
						$
								.ajax({
									url : 'employee/selectTreeNode_department.do?companyId='
											+ companyId
											+ '&companyid='
											+ companyId,
									type : 'GET',
									dataType : 'json',
									async : false,//同步执行，防止出现执行不成功的问题
									success : function(data) {
										data = data.data.items;
										for ( var e in data) {
											for ( var k in data[e]) {
												if (k == 'DeptName') {
													data[e]['name'] = data[e][k];
												}
											}
										}
										self.render(data);
									}
								})
					},
					render : function(data) {
						var self = this;
						var callback = self.opts.afterRender;
						if (self.opts.showRoot) {
							data.unshift({
								name : self.opts.rootTxt,
								id : 0
							});
							self.obj.addClass('showRoot');
						}
						if (!data.length)
							return;
						self.zTree = $.fn.zTree.init(self.obj, self.setting,
								data);
						self.zTree.expandAll(!self.opts.disExpandAll);
						if (callback && typeof callback === 'function') {
							callback(self, data);
						}
					},
					init : function($target, opts, setting, callback) {
						if ($target.length === 0) {
							return;
						}
						var self = this;
						self.opts = $.extend(true, self.opts, opts);
						self.container = $($target);
						self.obj = $(self._getTemplate(opts));
						self.container.append(self.obj);
						setting = $.extend(true, self.setting, setting);

						self.getData();
						var callback = self.opts.inited;
						if (callback && typeof callback === 'function') {
							callback(self);
						}
						return self;
					}
				}
				return tree.init($target, opts, setting, callback)
			}
		}
		Public.categoryTree = function($obj, opts) {
			var _last;
			if ($obj.length === 0) {
				return;
			}
			opts = opts ? opts : opts = {};
			var opts = $.extend(true, {
				inputWidth : '145',
				width : '',//'auto' or int
				height : '240',//'auto' or int
				trigger : true,
				defaultClass : 'ztreeCombo',
				disExpandAll : false,//展开全部
				defaultSelectValue : 0,
				showRoot : false,//显示root选择
				rootTxt : '',
				queryString : '',
				treeSettings : {
					callback : {
						beforeClick : function(treeId, treeNode) {
							if (_Combo.obj) {
								console.log(treeNode)
								_Combo.obj.val(treeNode.name);
								_Combo.obj.data('id', treeNode.Id); //获取id值的地方
								_Combo.hideTree();
							}
						}
					}
				}
			}, opts);
			var readonly = opts.disable ? ' readonly' : '';
			var _Combo = {
				container : $('<span class="ui-tree-wrap" style="width:'+opts.inputWidth+'px"></span>'),
				obj : $('<input type="text" class="input-txt" style="width:'
						+ (opts.inputWidth - 16) + 'px" id="' + $obj.attr('id')
						+ '" autocomplete="off"  placeholder="请选择部门"'
						+ readonly + ' value="' + ($obj.val() || $obj.text())
						+ '">'),
				trigger : $('<span class="trigger"></span>'),
				data : {},
				init : function() {
					var _parent = $obj.parent();
					var _this = _Combo;
					$obj.remove();
					_this.obj.appendTo(_this.container);
					if (opts.trigger) {
						_this.container.append(_this.trigger);
					}
					_this.container.appendTo(_parent);
					var len = $(".ztreeCombo").length;
					for (var i = 0; i < len; i++) {
						if (i == len) {
							$(".ztreeCombo").eq(i).show();
						} else {
						}
						;
					}
					;
					opts.afterRender = function(publicTree, data) {
						_this.zTree = publicTree;

						if (publicTree) {
							for (var i = 0, len = data.length; i < len; i++) {
								_this.data[data[i].id] = data[i];
							}
							;
							if (opts.defaultSelectValue !== '') {
								_this.selectByValue(opts.defaultSelectValue);
							}
							;
						}
					};
					opts.inited = function(publicTree) {
						_this.zTree = publicTree;
						if (publicTree) {
							publicTree.obj.css({
								'max-height' : opts.height
							});
							_this._eventInit();
							$(".ztreeCombo").css({
								"top" : "143px",
								"left" : "524px",
								"width" : "250px"
							});
							$(".inventory .ztreeCombo").css({
								"top" : "50px",
								"left" : "319px",
								"width" : "200px"
							});
						}
					}

					_this.zTree = Public.zTree.init($('body'), opts,
							opts.treeSettings);
					return _this;
				},
				showTree : function() {
					var _this = _Combo;
					if (!_this.zTree)
						return;
					if (_this.zTree) {
						var offset = _this.obj.offset();
						var topDiff = _this.obj.outerHeight();
						var w = opts.width ? opts.width : _this.obj.width();
						var _o = _this.zTree.obj.hide();
						_o.css({
							width : w,
							top : offset.top + topDiff,
							left : offset.left - 1
						});
					}
					var _o = _this.zTree.obj.show();
					_this.isShow = true;
					_this.container.addClass('ui-tree-active');
				},
				hideTree : function() {
					var _this = _Combo;
					if (!_this.zTree)
						return;
					var _o = _this.zTree.obj.hide();
					_this.isShow = false;
					_this.container.removeClass('ui-tree-active');
					if (opts.callback)
						opts.callback()
				},
				_eventInit : function() {
					var _this = this;
					if (opts.trigger) {
						_this.trigger.on('click', function(e) {
							e.stopPropagation();
							if (_this.zTree && !_this.isShow) {
								_this.showTree();
							} else {
								_this.hideTree();
							}
						});
					}
					;
					_this.obj.on('click', function(e) {
						e.stopPropagation();
						if (_this.zTree && !_this.isShow) {
							_this.showTree();
						} else {
							_this.hideTree();
						}
					});
					_this.obj.on('keyup', function(e) {
						e.stopPropagation();
						var self = $(this);
						_last = e.timeStamp;
						setTimeout(function() {
							if (_last - e.timeStamp == 0) {
								_this.zTree.getData({
									queryString : self.val()
								});
							}
						}, 1000)
					})
					if (_this.zTree) {
						_this.zTree.obj.on('click', function(e) {
							e.stopPropagation();
						});
					}

					$(document).click(function() {
						_this.selectByText($(_this.obj).val())
						_this.hideTree();
					});

				},
				getValue : function() {
					/* debugger */
					var id = this.obj.data('id') || 0;
					return id;
				},
				getText : function() {
					if (this.obj.data('id'))
						return this.obj.val();
					return '';
				},
				selectByValue : function(value) {
					if (value !== '') {
						if (this.data) {
							for (_temp in this.data) {
								var _temp = this.data[_temp];
								if (_temp.DeptCode === value) {
									this.obj.val(_temp.name)
									return this;
								}
							}
							;
							this.obj.val('');
						}
					}
					return this;
				},
				addData : function(parentNode, data) {
					this.zTree.zTree.addNodes(parentNode, {
						name : data.name,
						id : data.id
					});
					this.data[data.id] = data
				},
				selectByText : function(value) {

					var searchField = $("#searchField").val();
					var searchOper = $("#searchOper").val();
					var searchString = $("#searchString").val();
					var data = {
						searchField : searchField,
						searchOper : searchOper,
						searchString : searchString
					};
					CallBack(data);

					return this;
				}
			};
			return _Combo.init();
		}

		var param = {
			width : 150,
			inputWidth : 200,
			showRoot : true,
			rootTxt : parentname
		//默认显示
		};
		var categoryTree = Public.categoryTree($("#parentname"), {
			inputWidth : 160,
			height : 160,
			width : 150,
			rootTxt : "请选择类别"
		});
		function storedeptname() {
			var a = $("#deptname").val();
			return a;
		}
		function storedeptcode() {
			var b = $("#deptid").val();
			return b;
		}
		function storedpartentcode() {
			var c = $("#parentId").val();
			return c;
		}
	</script>
</body>
</html>